<template>
  <div class="departments-container">
    <el-card v-loading="isloading" class="tree-card">
      <!-- 用了一个行列布局 -->
      <el-row type="flex" justify="space-between" align="middle" style="height: 40px">
        <el-col :span="20">
          <span>{{ company.name }}</span>
        </el-col>
        <el-col :span="4">
          <el-row type="flex">
            <!-- 两个内容 -->
            <el-col :span="12">{{ company.company }}</el-col>
            <el-col :span="12">
              <!-- 下拉菜单 element -->
              <el-dropdown>
                <span>
                  操作<i class="el-icon-arrow-down" />
                </span>
                <!-- 下拉菜单 -->
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="AddAPI(company)">添加子部门</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <!-- 放置一个el-tree组件 -->
      <el-tree
        :data="departs"
        :props="defaultProps"
        :default-expand-all="true"
      >
        <!-- 用了一个行列布局 -->
        <!-- node是当前节点的对象   data是当前节点的数据 -->
        <template #default="{ data }">
          <el-row
            type="flex"
            justify="space-between"
            align="middle"
            style="height: 40px; width: 100%;"
          >
            <el-col :span="20">
              <span>{{ data.name }}</span>
            </el-col>
            <el-col :span="4">
              <el-row type="flex" justify="end">
                <!-- 两个内容 -->
                <el-col>{{ data.manager }}</el-col>
                <el-col>
                  <!-- 下拉菜单 element -->
                  <el-dropdown @command="handleCommand($event,data)">
                    <span> 操作<i class="el-icon-arrow-down" /> </span>
                    <!-- 下拉菜单 -->
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="add">添加子部门</el-dropdown-item>
                      <el-dropdown-item command="edit">编辑部门</el-dropdown-item>
                      <el-dropdown-item command="del">删除部门</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-tree>
    </el-card>
    <!-- 这是一个弹窗 -->
    <add-dept ref="adddept" :show-dialog.sync="showDialog" :node-data="nodeData" :depar-list="deparList" @addchenge="getDepartments" />
  </div>
</template>

<script>
import { getDepartment, delDepartmentsApi } from '@/api/departments'
import { getTree } from '@/utils/index'
import addDept from './components/add-dept.vue'
export default {
  name: 'Departments',
  components: { addDept },
  data() {
    return {
      // 第一行需要展示的公司名称
      company: {
        id: '',
        name: '',
        company: '负责人',
        children: []
      },
      // 树状数据
      departs: [],
      // el-tree的规则
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      // 弹窗默认隐藏
      showDialog: false,
      // 传递给子组建比较名称的数据
      nodeData: {},
      // 传递给子组建比较编码的数据
      deparList: [],
      isloading: false

    }
  },
  created() {
    this.getDepartments()
  },
  methods: {
    // 获取组织架构的接口
    async getDepartments() {
      this.isloading = true
      this.loading = false
      const { data } = await getDepartment()
      // console.log(data)
      // 传递给子组建比较编码的数据赋值
      this.deparList = data.depts

      this.company.name = data.companyName
      this.departs = getTree(data.depts, '')
      // console.log(this.departs)
      this.company.children = this.departs
      this.isloading = false
    },
    // 点击下拉栏的时候
    handleCommand(type, data) {
      // console.log(type)
      // console.log(data)
      if (type === 'add') {
        // console.log('添加操作')
        this.AddAPI(data)
      }
      if (type === 'edit') {
        // console.log('编辑操作')
        this.editApi(data)
      }
      if (type === 'del') {
        this.delapi(data.id)
      }
    },
    /**
    * 删除数据的方法
    */
    delapi(id) {
      this.$confirm('你确认要进行删除么?', '温馨提示').then(async() => {
        // 删除操作成功
        await delDepartmentsApi(id)
        this.getDepartments()
        // 添加提示
        this.$message.success('删除操作成功')
      }).catch(error => {
        console.log(error)
      })
    },
    // 添加的时候让弹窗显示
    AddAPI(data) {
      this.showDialog = true
      this.nodeData = data
    },
    // 点击编辑的时候让弹窗显示
    editApi(data) {
      this.showDialog = true
      this.nodeData = data
      // 让请求在下一次dom更新后执行
      this.$nextTick(() => {
        this.$refs.adddept.gettreename(data)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-tree {
  ::v-deep {
    // 小三角的样式, 去掉默认的小三角的旋转效果
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    // 有子节点 且未展开 +
    .el-icon-caret-right:before {
      background: url("~@/assets/common/add-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 有子节点 且已展开 -
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before{
      background: url("~@/assets/common/minus-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 没有子节点
    .el-tree-node__expand-icon.is-leaf::before  {
      background: url("~@/assets/common/user-filling.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
  }
}
</style>
